<template>
  <div>
    <lay-layout>

      <lay-header>
        <SysHead @displayMenu="updateShowMenu"></SysHead>
      </lay-header>



      <lay-body>


      <lay-layout style="width: 100%">

        <lay-side :style="styleObject">
          <LeftMenu ref="leftMenuRef" ></LeftMenu>
        </lay-side>

        <lay-body style="padding: 20px;background-color: #F0F2F8">
            <RouterView></RouterView>


        </lay-body>


      </lay-layout>
      </lay-body>


    </lay-layout>
  </div>

</template>

<script>
import {RouterView} from "vue-router";

import SysHead from "@/components/sys/SysHead.vue";
import LeftMenu from "@/components/sys/LeftMenu.vue";

export default {
  components: {SysHead, LeftMenu, RouterView},
  data() {
    return {
      styleObject:{
        flex:'0 0 200px'
      }

    }
  },
  methods:{
    updateShowMenu(val){
      console.log(val);
      if (val){
        this.styleObject.flex='0 0 200px';
        this.$refs.leftMenuRef.collapse=false;
      }else {
        this.styleObject.flex='0 0 60px';
        this.$refs.leftMenuRef.collapse=true;
      }
    }
  }
}
</script>
<style>







</style>
